import React, { Component } from 'react'
import Son from "./components/Son"
import axios from "axios"
export class App extends Component {
  //类似于vue中的data
  state={
    message:"我是谢大脚",
    arr:[1,2,3,4,5],
    obj:{
      name:"赵四",
      sing:"炸雷"
    },
    data:[],
    num:1,
    list:[]
  }
  //类似于vue中的created()
  //componentDidMount 刚进页面执行的生命周期钩子函数
  componentDidMount(){
    axios.get("/list").then(res=>{
      // console.log(res.data.list);
      this.setState({
        data:res.data.list
      })
    })
  }
  // btn(){
  //   console.log(1111);
  // }
  btn = () =>{
    console.log(1111);
    //修改state里的值
    let newobj = {
      name:"谢大脚",
      sing:"爱化妆"
    }
    this.setState({
      obj:newobj
    })
  }

  parentState = (arr)=>{
    console.log("parentState");
    this.setState({
      arr
    })
  }
  render() {
    console.log(this);
    let {message,arr,obj,data} = this.state
    return (
      <div>
        app
        {message}
        <br/>
        <p>name:{obj.name} 唱歌：{obj.sing} </p>
        {
          data&&data.map(item=>{
            return <p key={item.id}>{item.title}</p>
          })
        }
        <button onClick={this.btn}>点我修改数据</button>
        <Son my_arr={arr} parentState={this.parentState}></Son>
      </div>
    )
  }
}

export default App

// {{message}}
// data(){
//   message:"123"
// }